<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ page import="common.common.Common"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="icon" type="image/ico" href="../img/favicon.ico" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js" type="text/javascript"></script>
<script src="http://cdn.jquerytools.org/1.2.6/all/jquery.tools.min.js" type="text/javascript"></script>
<script src="http://releases.flowplayer.org/js/flowplayer-3.2.12.min.js" type="text/javascript"></script>
<title>Insert title here</title>
</head>
<body>

	<h1>User Home</h1>
	<h1>You are logged in</h1>
	<hr />
	<h3>Servlet output</h3>
	<p><%=Common.printSomeRandom%></p>
	<hr>
		<script type="text/javascript">
			var YWPParams = {
				termDetection : "on",
				displaystate : 1,
				volume : 0.7
			};
		</script>
		<h3>Yahoo player</h3>
		<a href="http://www.youtube.com/watch?v=i56XeM0-b8Y">YouTube link</a>
		<hr> 
		<h3>Flow player</h3>
		<a href="../media/test.mp3">Sample mp3 link</a> 
		<div id="player" class="player" style="display:block;width:640px;height:30px;"></div>
		<script type="text/javascript">
		$f("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.16.swf", {
		    plugins: {
		        controls: {
		            fullscreen: false,
		            height: 30,
		            autoHide: false
		        }
		    },
			clip: {
		       url: "../media/test.mp3"   
		    }
		});
		</script>
	<hr>
	<h3>Prpcessing.js</h3>
	<script src="../js/processing-1.4.1.js" type="text/javascript"></script>
	<script type="text/processing" data-processing-target="mycanvas">
// Global variables
float radius = 50.0;
int X, Y;
int nX, nY;
int delay = 10;

// Setup the Processing Canvas
void setup(){
  size( 700, 200 );
  strokeWeight( 10 );
  frameRate( 15 );
  X = width / 2;
  Y = height / 2;
  nX = X;
  nY = Y;  
}

// Main draw loop
void draw(){
  
  radius = radius + sin( frameCount / 4 );
  
  // Track circle to new destination
  X+=(nX-X)/delay;
  Y+=(nY-Y)/delay;
  
  // Fill canvas grey
  background( 100 );
  
  // Set fill-color to blue
  fill( 0, 121, 184 );
  
  // Set stroke-color white
  stroke(255); 
  
  // Draw circle
  ellipse( X, Y, radius, radius );                  
}


// Set circle's next destination
void mouseMoved(){
  nX = mouseX;
  nY = mouseY;  
}
	</script>
	<canvas id="mycanvas" style="auto-align-center"></canvas>
	<hr>
	<h1>
		<a href="../index.html">Logout</a>
	</h1>


	<script type="text/javascript" src="../js/player.js"></script>
</body>
</html>